<template>
  <div class="page user-home-page">
    <el-row :gutter="18">
      <el-col :span="12">
        <el-card class="box-card" :body-style="dataBoxBodyStyle">
          <ScoreBar class="scorebar" name="今日被点击" :num="0"></ScoreBar>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card" :body-style="dataBoxBodyStyle">
          <ScoreBar class="scorebar" name="今日涨粉" :num="0"></ScoreBar>
        </el-card>
      </el-col>
    </el-row>
    <el-row class="browse-history-wrapper">
      <el-col :span="24">
        <el-card class="box-card">
          <h3 class="browse-history-title">历史浏览记录：</h3>
          <div v-if="hasHistory && !isLoading">
            <ArticleItem v-for="item in history" :key="item.article._id" :avatar="item.article.avatar"
              :title="item.article.title" :desc="(item.article.desc || item.article.content)"
              :date="('阅读时间：' + item.readDate)" @click="handleClickArticle(item.article._id)"></ArticleItem>
            <div class="tips">— 仅保留最近30次记录 —</div>
          </div>
          <div v-else-if="!isLoading" class="no-history-wrapper">
            暂无任何浏览记录...
          </div>
          <div v-else v-loading="isLoading" class="loading-wrapper"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ScoreBar from '@/components/ScoreBar.vue'
import ArticleItem from '@/components/ArticleItem.vue'
import api from '@/api'
export default {
  name: 'UserHomeView',
  components: { ScoreBar, ArticleItem },
  props: {
    type: String
  },
  data() {
    return {
      dataBoxBodyStyle: {
        'min-height': '130px',
        'display': 'flex',
        'flex-direction': 'column',
        'justify-content': 'center'
      },
      history: [], //debug，
      isLoading: true
    }
  },
  computed: {
    hasHistory() {
      return this.history[0]
    }
  },
  mounted() {
    this.loadHistory()
  },
  methods: {
    loadHistory() {
      this.isLoading = true

      // FIXME:封装到utils中
      // 显示加载界面（至少显示600ms）
      let isFinally = false
      let isTimeout = false
      setTimeout(() => {
        isTimeout = true
        if (isFinally) { this.isLoading = false }
      }, 600)

      // 获取历史记录
      api.article.getHistory().then(result => {
        const articles = result.data.articles.reverse()
        this.history = articles
      }).finally(() => {
        // finally
        isFinally = true
        if (isTimeout) { this.isLoading = false }
      })

    },
    handleClickArticle(id) {
      this.$router.push({ name: 'article-details', params: { id } })
    }
  }
}
</script>

<style lang="scss" scoped>
.user-home-page {
  // .data-row {
  //   height : 130px;
  // }

  .scorebar {
    &:deep(.num) {
      font-size: 20pt;
      margin-bottom: 8px;
    }
  }

  .browse-history-wrapper {
    .browse-history-title {
      color: var(--el-text-color-secondary);
      text-align: center;
      font-size: 10pt;
      font-weight: normal;
      margin: 2px 0 16px 0;
    }

    .no-history-wrapper {
      padding: 50px 0;
      text-align: center;
      color: var(--el-text-color-secondary);
    }

    .tips {
      padding: 12px 0 2px 0;
      text-align: center;
      font-size: 9pt;
      color: var(--el-text-color-placeholder);
    }
  }

  .el-row {
    margin-bottom: 18px;
  }
}
</style>
